<template>
  <div class="upload-history">
    <div class="page-header">
      <h2>上传历史</h2>
      <p class="page-description">查看和管理您的上传历史记录</p>
    </div>

    <div class="content">
      <a-alert
        message="功能开发中"
        description="上传历史功能正在开发中，敬请期待..."
        type="info"
        show-icon
        style="margin-bottom: 24px"
      />
      
      <a-card title="即将支持的功能">
        <a-list>
          <a-list-item>
            <template #actions>
              <a-tag color="blue">即将推出</a-tag>
            </template>
            <a-list-item-meta
              title="上传记录"
              description="查看所有上传的文件记录，包含上传时间、状态等信息"
            />
          </a-list-item>
          <a-list-item>
            <template #actions>
              <a-tag color="blue">即将推出</a-tag>
            </template>
            <a-list-item-meta
              title="状态筛选"
              description="按上传状态筛选记录：成功、失败、进行中等"
            />
          </a-list-item>
          <a-list-item>
            <template #actions>
              <a-tag color="blue">即将推出</a-tag>
            </template>
            <a-list-item-meta
              title="时间范围"
              description="按时间范围查看上传历史"
            />
          </a-list-item>
          <a-list-item>
            <template #actions>
              <a-tag color="blue">即将推出</a-tag>
            </template>
            <a-list-item-meta
              title="重试上传"
              description="对失败的上传任务进行重试"
            />
          </a-list-item>
          <a-list-item>
            <template #actions>
              <a-tag color="blue">即将推出</a-tag>
            </template>
            <a-list-item-meta
              title="批量操作"
              description="批量删除、重新上传等操作"
            />
          </a-list-item>
        </a-list>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
// 上传历史页面逻辑
</script>

<style scoped>
.upload-history {
  padding: 24px;
  background: var(--theme-surface);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--theme-shadow);
  border: 1px solid var(--theme-border);
  transition: all 0.3s ease;
}

.page-header {
  margin-bottom: 24px;
  text-align: center;
}

.page-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--theme-text);
  margin-bottom: 8px;
  transition: color 0.3s ease;
  text-shadow: 0 1px 2px var(--theme-shadow);
  letter-spacing: 0.5px;
}

.page-description {
  color: var(--theme-textSecondary);
  font-size: 14px;
  margin: 0;
  transition: color 0.3s ease;
  font-weight: 500;
  line-height: 1.6;
}

.content {
  max-width: 800px;
  margin: 0 auto;
}

/* 确保所有Ant Design组件都使用主题色 */
:deep(.ant-alert) {
  background: var(--theme-background);
  border-color: var(--theme-border);
  transition: all 0.3s ease;
}

:deep(.ant-alert-message) {
  color: var(--theme-text);
  transition: color 0.3s ease;
  font-weight: 600;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

:deep(.ant-alert-description) {
  color: var(--theme-textSecondary);
  transition: color 0.3s ease;
  font-weight: 500;
  line-height: 1.6;
}

:deep(.ant-card) {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  transition: all 0.3s ease;
}

:deep(.ant-card-head) {
  background: var(--theme-background);
  border-bottom-color: var(--theme-border);
  transition: all 0.3s ease;
}

:deep(.ant-card-head-title) {
  color: var(--theme-text);
  transition: color 0.3s ease;
  font-weight: 700;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

:deep(.ant-card-body) {
  background: var(--theme-surface);
  transition: all 0.3s ease;
}

:deep(.ant-list-item) {
  border-bottom-color: var(--theme-border);
  transition: border-color 0.3s ease;
}

:deep(.ant-list-item-meta-title) {
  color: var(--theme-text);
  transition: color 0.3s ease;
  font-weight: 700;
  text-shadow: 0 1px 2px var(--theme-shadow);
}

:deep(.ant-list-item-meta-description) {
  color: var(--theme-textSecondary);
  transition: color 0.3s ease;
  font-weight: 500;
  line-height: 1.6;
}

:deep(.ant-tag) {
  border-color: var(--theme-border);
  transition: all 0.3s ease;
  font-weight: 600;
}

/* 确保所有可能的白色背景都被覆盖 */
.upload-history * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 修复可能遗漏的卡片背景 */
.upload-history {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-text) !important;
}

/* 修复可能遗漏的文字颜色 */
.page-header h2,
.page-description {
  color: var(--theme-text) !important;
}

/* 修复可能遗漏的边框和阴影 */
.upload-history {
  border-color: var(--theme-border) !important;
  box-shadow: 0 2px 8px var(--theme-shadow) !important;
}
</style> 